<template>
  <view v-if="privacyShow">
    <Drawer class="privacy" :show="true">
      <!--title-->
      <view class="title">
        <image class="icon" mode="aspectFit" src="/static/privacy/privacyLogo.png"></image>
        <view class="header-title">{{ $t('APP.Common.Privacy.Title.Text') }}</view>
      </view>
      <!--content-->
      <view class="content"
        ><text>{{ $t('APP.Common.Privacy.Content.Left.Text') }}</text>
        <text class="special" @click="openPrivacyContract">{{ $t('APP.Common.Privacy.Content.Title.Text') }}</text>
        <text>{{ $t('APP.Common.Privacy.Content.Right.Text') }}</text>
      </view>
      <!--底部同意和拒绝按钮 -->
      <view class="bottom_button">
        <button id="disagree-btn" class="disagree-btn" @click="handleDisagree">
          {{ $t('APP.Common.Privacy.DisAgree.Button.Text') }}
        </button>
        <button
          id="agree-btn"
          open-type="agreePrivacyAuthorization"
          class="agree-btn"
          @agreeprivacyauthorization="handleAgree"
        >
          {{ $t('APP.Common.Privacy.Agree.Button.Text') }}
        </button>
      </view>
    </Drawer>
  </view>
</template>

<script setup lang="ts">
import Drawer from '@/common/drawer.vue'
import { trackEvent, TrackType } from '@/dataReport/tracks'
import { safeTrack } from '@/dataReport/dataReportUtil'
import { useAuthStore } from '@/store/auth'
const authStore = useAuthStore()
const props = defineProps<{
  show?: boolean
  autoJudge?: boolean
}>()
const emit = defineEmits<{
  (e: 'agree'): void
  (e: 'disagree'): void
  (e: 'showPrivacy'): void
  (e: 'update:show', show: boolean): void
}>()
const privacyShow = ref(false)
// 挂载
let privacyResolves = new Set()

defineExpose({
  addPrivacyApiEventMonitor,
})
function addPrivacyApiEventMonitor() {
  if (wx.onNeedPrivacyAuthorization) {
    wx.onNeedPrivacyAuthorization((resolve) => {
      if (typeof privacyHandler === 'function') {
        console.error('onNeedPrivacyAuthorization')
        privacyHandler(resolve)
      }
    })
  }
}

function judgeAutoShowPrivacy() {
  addPrivacyApiEventMonitor()
  if (!props.autoJudge) {
    return
  }
  if (!authStore.isLogin) {
    return
  }
  wx.getPrivacySetting({
    success: (res: any) => {
      safeTrack(() => {
        trackEvent(
          'getPrivacySetting',
          {
            needAuthorization: res.needAuthorization,
          },
          TrackType.BusinesssScene
        )
      })
      console.error('是否需要授权：', res.needAuthorization, '隐私协议的名称为：', res.privacyContractName)
      if (res.needAuthorization) {
        privacyShow.value = true
      } else {
        privacyShow.value = false
      }
    },
    fail: (error: any) => {
      safeTrack(() => {
        trackEvent(
          'getPrivacySetting',
          {
            result: false,
          },
          TrackType.BusinesssScene
        )
      })
    },
    complete: () => {},
  })
}

onMounted(() => {
  judgeAutoShowPrivacy()
})

const privacyHandler = (resolve: any) => {
  // emit('showPrivacy')
  privacyShow.value = true
  privacyResolves.add(resolve)
}

/**
 * 打开小程序隐私保护指引
 */
function openPrivacyContract() {
  safeTrack(() => {
    trackEvent('APP.Common.Privacy.Content.Title.Text', {}, TrackType.BusinesssScene)
  })
  wx.openPrivacyContract({
    success: (res) => {
      console.log('openPrivacyContract success')
    },
    fail: (res) => {
      console.error('openPrivacyContract fail', res)
    },
  })
}

/**
 * 拒绝
 */
function handleDisagree() {
  safeTrack(() => {
    trackEvent('APP.Common.Privacy.DisAgree.Button.Text', {}, TrackType.BusinesssScene)
  })
  privacyResolves.forEach((resolve) => {
    resolve({
      event: 'disagree',
    })
  })
  privacyResolves.clear()
  privacyShow.value = false
}

/**
 * 同意
 */
function handleAgree() {
  safeTrack(() => {
    trackEvent('APP.Common.Privacy.Agree.Button.Text', {}, TrackType.BusinesssScene)
  })
  privacyResolves.forEach((resolve) => {
    resolve({
      event: 'agree',
      buttonId: 'agree-btn',
    })
  })
  privacyResolves.clear()
  // emit('agree')
  privacyShow.value = false
  emit('agree')
}
</script>

<style lang="less">
.title {
  display: flex;
  flex-direction: row;
  justify-content: space-left;
  align-items: center;
  margin-left: 16rpx;
  margin-right: 16rpx;
  .icon {
    width: 44rpx;
    height: 44rpx;
  }
  .header-title {
    color: #2c3846;
    font-family: PingFang SC;
    font-size: 40rpx;
    font-style: normal;
    font-weight: 500;
    margin-left: 16rpx;
  }
}
.content {
  margin-top: 24rpx;
  color: #2c3846;
  font-family: PingFang SC;
  font-size: 28rpx;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 100rpx;
  margin-left: 16rpx;
  margin-right: 16rpx;
  .special {
    color: #408df2;
  }
}
.bottom_button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 0rpx 56rpx 0rpx 0rpx;
  width: 100%;
  .disagree-btn {
    height: 80rpx;
    border-color: transparent; // 将边框颜色设为透明
    border-radius: 8rpx;
    background: #ededed;
    color: #04c160;
    font-family: PingFang SC;
    font-size: 34rpx;
    font-style: normal;
    font-weight: 500;
    line-height: 80rpx;
    margin-right: 32rpx;
    flex: 1;
  }
  .agree-btn {
    height: 80rpx;
    border-radius: 8rpx;
    border-color: transparent; // 将边框颜色设为透明
    background: #04c160;
    color: #fff;
    font-family: PingFang SC;
    font-size: 34rpx;
    font-style: normal;
    font-weight: 500;
    line-height: 80rpx;
    flex: 1;
  }
}
</style>
